<template>
  <div class="view_page personalCenter">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <div class="left">
          <div class="menu-title">
            个人中心
          </div>
        </div>
        <div class="right">
          <el-button @click="quxiao">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </div>
      <!--卡片内容-->
      <div class="personal-content">
        <div class="allview">
          <el-form
            class="personal-form"
            label-width="80px"
            ref="form"
            :model="userDetail">
            <el-form-item label="姓名">
              <el-input v-model="userDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="userDetail.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" placeholder="******" disabled></el-input>
              <a href="javascript:;" @click="toUpdatePwd()">修改</a>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <!--修改密码弹框-->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="passwordForm" :model="passwordForm" label-width="90px" style="padding: 0px 20px;">
        <el-form-item label="旧密码">
          <el-input type="password" readonly onfocus="this.removeAttribute('readonly');"
                    v-model="passwordForm.oldPassword" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" readonly onfocus="this.removeAttribute('readonly');"
                    v-model="passwordForm.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input type="password" readonly onfocus="this.removeAttribute('readonly');"
                    v-model="passwordForm.checkPassword" placeholder="请输入确认密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="passQd">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui'
  import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";

  export default {
    components: {ElInput},
    data() {
      return {
        userDetail: {
          name: '',
          username: '',
        },
        passwordForm: {
          oldPassword: '',
          newPassword: '',
          checkPassword: ''
        },
        dialogVisible: false,
        userInfo: JSON.parse(localStorage.getItem('loginPersonnelInformation')),
      }
    },
    mounted() {
      console.log("userInfo", this.userInfo);
      this.getUserInfo();
    },
    created() {
    },
    methods: {
      //当前登录者信息
      getUserInfo() {
        var datas = {
          uid: this.userInfo.id
        };
        this.$apis.getUserById(datas).then((res) => {
          if (res.code == 1) {
            this.userDetail = res.data;
            localStorage.setItem('loginPersonnelInformation', JSON.stringify(res.data));
          }
        });
      },
      //点击修改密码
      toUpdatePwd() {
        this.dialogVisible = true;
        this.passwordForm.oldPassword = '';
        this.passwordForm.newPassword = '';
        this.passwordForm.checkPassword = '';
      },
      //密码确定
      passQd() {
        if (this.passwordForm.oldPassword == "") {
          Message.warning("请输入旧密码");
          return
        }
        if (this.passwordForm.newPassword == "") {
          Message.warning("请输入新密码");
          return
        }
        if (this.passwordForm.checkPassword == "") {
          Message.warning("请输入确认密码");
          return
        }
        if (this.passwordForm.newPassword != this.passwordForm.checkPassword) {
          Message.warning("新密码与确认密码不一致");
          return
        }
        //调接口
        var datas = {
          uid: this.userDetail.id,
          oldpassword: this.passwordForm.oldPassword,
          password: this.passwordForm.newPassword
        };
        this.$apis.setPassword(datas).then((res) => {
          if (res.code == 1) {
            this.dialogVisible = false;
            Message.success(res.message);
            this.$router.push({path: '/login'});

          } else {
            Message.error(res.message);
          }
        });
      },
      //取消
      quxiao() {
        this.getUserInfo();
      },
      //保存
      save() {
        if (this.userDetail.name == "") {
          Message.warning("姓名不能为空");
          return;
        }
        var datas = {
          uid: this.userInfo.id,
          name:this.userDetail.name
        };
        this.$apis.setUser(datas).then((res) => {
          if (res.code == 1) {
            Message.success(res.message);
            this.getUserInfo();
          }
        });
      }
    },
  }
</script>

<style>
  .personal-form {
    padding: 20px 150px 20px 20px;
  }

  .personal-form .el-input, .personal-form .el-textarea {
    width: 50%;
  }

  .personal-form .el-form-item__label {
    color: #808080
  }

  .personal-form a {
    color: #38f !important;
    margin-left: 10px;
  }

  .tishi {
    position: absolute;
    font-size: 12px;
    color: #f12828;
    line-height: 22px;
    padding-left: 5px;
  }
</style>
